<template>
  <div class="global">
    <Header title="全球变暖及温室气体排放" />
    <div class="nav-btn">
      <div class="btn-left">
        <a
          v-for="(item, index) in leftBtnList"
          :key="index"
          @click.prevent="openModal(item.comName, item.category)"
        >
          <div class="btn-list">{{ item.name }}</div>
        </a>
      </div>
      <div class="btn-right">
        <a
          v-for="(item, index) in rightBtnList"
          :key="index"
          @click.prevent="openModal(item.comName, item.category)"
        >
          <div class="btn-list">{{ item.name }}</div>
        </a>
      </div>
    </div>

    <div class="main">
      <el-row class="first-row">
        <el-col :span="3" :xs="10" :sm="5" :md="5" :lg="3">
          <dv-border-box-12>
            <div id="rose-container" class="top-y-1">
              <Nightingale
                :key="adjustArr[1].flag"
                :height="adjustArr[1].height"
                :width="adjustArr[1].width"
              />
            </div>
            <div class="bottom-y-1">
              <div
                v-for="(item, index) in carbonList"
                :key="index"
                class="info-box"
              >
                <div class="info-num">
                  <svg class="icon" aria-hidden="true">
                    <use :xlink:href="item.icon" />
                  </svg>
                  <span>{{ item.num }}</span>
                </div>

                <div class="info-title">
                  <span>{{ item.title }}</span>
                </div>
              </div>
            </div>
          </dv-border-box-12>
        </el-col>
        <el-col :span="4" :xs="14" :sm="7" :md="7" :lg="4">
          <dv-border-box-12>
            <div id="double-bar-container" class="top-y-2">
              <DoubleBar
                :key="adjustArr[2].flag"
                :height="adjustArr[2].height"
                :width="adjustArr[2].width"
              />
            </div>
            <div id="funnel-container" class="bottom-y-2">
              <Funnel
                :key="adjustArr[3].flag"
                :height="adjustArr[3].height"
                :width="adjustArr[3].width"
              />
            </div>
          </dv-border-box-12>
        </el-col>
        <el-col
          :span="10"
          :xs="0"
          :sm="0"
          :md="0"
          :lg="10"
          class="hidden-sm-and-down"
        >
          <div id="earth-container">
            <Earth
              :key="adjustArr[0].flag"
              :height="adjustArr[0].height"
              :width="adjustArr[0].width"
            />
          </div>
        </el-col>

        <el-col :span="4" :xs="14" :sm="7" :md="7" :lg="4">
          <dv-border-box-13>
            <div class="top-y-3">
              <div class="title">
                <span>联合国落地政策执行进度</span>
                <dv-decoration-2 style="width: 100%; height: 5px" />
              </div>
              <dv-capsule-chart :config="capBar" style="width: 100%" />
            </div>
            <div class="bottom-y-3">
              <div class="ring-chart">
                <el-row>
                  <el-col
                    v-for="(item, index) in pieList"
                    :key="index"
                    :span="12"
                  >
                    <div id="ring-1" class="ring-chart">
                      <Pie
                        :key="adjustArr[4].flag"
                        :height="adjustArr[4].height"
                        :width="adjustArr[4].width"
                        :title="item.title"
                        :value="item.value"
                      />
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div class="battery">
                <dv-water-level-pond
                  :key="poolKey"
                  :config="water"
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
          </dv-border-box-13>
        </el-col>

        <el-col :span="3" :xs="10" :sm="5" :md="5" :lg="3">
          <dv-border-box-13 class="first-col-x">
            <div class="list-loop">
              <div class="title">
                <span style="font-size: 12px; color: #fff"
                  >各国应对气候变化风险排名</span
                >
                <dv-decoration-2 style="width: 100%; height: 5px" />
              </div>
              <div class="container">
                <dv-scroll-board :config="config" style="height: 100%" />
              </div>
            </div>
          </dv-border-box-13>
        </el-col>
      </el-row>

      <el-row class="second-row">
        <el-col :span="7" :xs="24" :sm="12" :md="12" :lg="7">
          <dv-border-box-13>
            <div id="tool-bar-container" class="tool-bar">
              <ToolBar
                :key="adjustArr[5].flag"
                :height="adjustArr[5].height"
                :width="adjustArr[5].width"
              />
            </div>
          </dv-border-box-13>
        </el-col>
        <el-col
          :span="10"
          :xs="0"
          :sm="0"
          :md="0"
          :lg="10"
          class="dv-list hidden-md-and-down"
        >
          <dv-border-box-7
            v-for="(item, index) in staistics"
            :key="index"
            :color="['rgba(14, 252, 255, .1)', '#2e6099']"
          >
            <el-row>
              <el-col :span="7">
                <div :id="`logo_${index + 1}`" class="logo-container" />
              </el-col>
              <el-col :span="17">
                <div class="font-desc">
                  <p>{{ item.firstLine }}</p>
                  <p>{{ item.secondLine }}</p>
                </div>
              </el-col>
            </el-row>
          </dv-border-box-7>
        </el-col>
        <el-col :span="7" :xs="24" :sm="12" :md="12" :lg="7">
          <dv-border-box-12>
            <div id="heat-container" class="heat-map">
              <Heat
                :key="adjustArr[5].flag"
                :width="adjustArr[5].width"
                :height="adjustArr[5].height"
              />
            </div>
          </dv-border-box-12>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入字体图标
import '@/icon/carbon/iconfont'
import '@/icon/arrow/iconfont'

import VuePdfEmbed from 'vue-pdf-embed/dist/vue2-pdf-embed'

import { Chart } from '@/config/chart'
import { adjust } from '@/utils/adjust'

export default {
  components: {
    Header: () => import('@/components/header'),
    Earth: () => import('./charts/Earth'),
    Nightingale: () => import('./charts/Nightingale'),
    DoubleBar: () => import('./charts/DoubleBar'),
    Funnel: () => import('./charts/Funnel'),
    Pie: () => import('./charts/Pie'),
    ToolBar: () => import('./charts/ToolBar'),
    Heat: () => import('./charts/Heat')
  },
  data() {
    return {
      adjustArr: [
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null)
      ],
      staistics: [
        {
          id: '1-1',
          firstLine: '温室气体增幅',
          secondLine: '1.5-2% / 年'
        },
        {
          id: '1-2',
          firstLine: '损害价值总额',
          secondLine: '6630 M（$）'
        },
        {
          id: '1-3',
          firstLine: '碱性土壤占比',
          secondLine: '3.5%'
        },
        {
          id: '2-1',
          firstLine: '大气压强走势',
          secondLine: '低纬->高纬'
        },
        {
          id: '2-2',
          firstLine: '海平面上升增幅',
          secondLine: '4.62 （mm）'
        },
        {
          id: '2-3',
          firstLine: '平均气温增幅',
          secondLine: '0.13 ℉/年'
        }
      ],
      carbonList: [
        { title: '总排放量(t)', icon: '#icon-yonggongzongliang', num: '408亿' },
        { title: 'CO2浓度(ppm)', icon: '#icon-CO2nongdu', num: '414.7' },
        { title: '年吸收率', icon: '#icon-yonggongzongliang', num: '30%' },
        { title: '碳排放因子(kg/GDP)', icon: '#icon-duoyinzifenxi', num: '1.5' }
      ],
      config: {
        header: ['国家', '风险指数', '趋势'],
        data: [
          [
            '菲律宾',
            '10.11',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '孟加拉',
            '9.88',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '日本',
            '8.78',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '津巴布韦',
            '8.66',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '马达加斯加',
            '8.21',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '印度',
            '7.93',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '摩洛哥',
            '7.72',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '巴基斯坦',
            '7.59',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '越南',
            '7.25',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '尼泊尔',
            '7.11',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '坦桑尼亚',
            '7.09',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '玻利维亚',
            '6.12',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '土耳其',
            '5.44',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '喀麦隆',
            '5.32',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiajiang"></use></svg>'
          ],
          [
            '塞内加尔',
            '4.23',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ],
          [
            '毛里求斯',
            '2.11',
            '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangshengjiantou"></use></svg>'
          ]
        ],
        headerBGC: 'rgba(255, 255, 255, .3)',
        oddRwBGC: 'rgba(255, 255, 255,.2)',
        evenRowBGC: 'rgba(255, 255, 255, 0)',
        headerHeight: 30,
        columnWidth: [100, 100, 30],
        rowNum: 10
      },
      capBar: {
        data: [
          {
            name: '巴黎协定',
            value: 50
          },
          {
            name: '可持续发展',
            value: 30
          },
          {
            name: '节能减排',
            value: 20
          },
          {
            name: '碳中和',
            value: 22
          },
          {
            name: '地球观测',
            value: 70
          }
        ]
      },
      pieList: [
        { title: '中国双碳进度', value: 20 },
        { title: '中国森林碳汇', value: 33 }
      ],
      water: {
        data: [33, 23],
        shape: 'roundRect'
      },
      leftBtnList: [
        {
          name: '系统首页',
          comName: 'home-wea',
          category: 'link'
        },
        {
          name: '变化趋势',
          comName: 'ChangeTrend',
          category: 'chart'
        },
        {
          name: '变暖原因',
          comName: 'Scatter',
          category: 'chart'
        },
        {
          name: '框架公约',
          comName: 'convention',
          category: 'file'
        }
      ],
      rightBtnList: [
        {
          name: '应对行动',
          comName: 'TimeLineAction',
          category: 'chart'
        },
        {
          name: '低碳转型',
          comName: 'TransformMind',
          category: 'chart'
        },
        {
          name: '宣传视频',
          comName: 'publicize',
          category: 'video'
        },
        {
          name: '时间胶囊',
          comName: 'capsule',
          category: 'link'
        }
      ],
      poolKey: 0,
      anim: null
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  mounted() {
    this.screenWidth = document.body.clientWidth

    const earthDom = document.getElementById('earth-container')
    const roseDom = document.getElementById('rose-container')
    const doubleBarDom = document.getElementById('double-bar-container')
    const funnelDom = document.getElementById('funnel-container')
    const ringFirstDom = document.getElementById('ring-1')
    const toolBarDom = document.getElementById('tool-bar-container')

    this.adjustArr[0].dom = earthDom
    this.adjustArr[1].dom = roseDom
    this.adjustArr[2].dom = doubleBarDom
    this.adjustArr[3].dom = funnelDom
    this.adjustArr[4].dom = ringFirstDom
    this.adjustArr[5].dom = toolBarDom

    // 用于渲染 lottie 图表的 dom
    const doms = [
      document.getElementById('logo_1'),
      document.getElementById('logo_2'),
      document.getElementById('logo_3'),
      document.getElementById('logo_4'),
      document.getElementById('logo_5'),
      document.getElementById('logo_6')
    ]

    const data = [
      require('@/assets/lottie/global/gas'),
      require('@/assets/lottie/global/ph_1'),
      require('@/assets/lottie/global/ph_2'),
      require('@/assets/lottie/global/pressure'),
      require('@/assets/lottie/global/sea'),
      require('@/assets/lottie/global/sun')
    ]

    for (let i = 0; i < doms.length; ++i) {
      this.anim = this.$lottie.loadAnimation({
        container: doms[i],
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: data[i]
      })
    }

    for (let i = 0; i < this.adjustArr.length; ++i) {
      if (this.adjustArr[i].dom) adjust(this.adjustArr[i])
    }

    window.addEventListener('resize', this.poolAutoFit)
  },
  beforeDestroy() {
    this.$modal.hideAll()

    this.anim && this.anim.destroy()

    for (const obj of this.adjustArr) {
      if (obj.dom && obj.observer) {
        obj.observer.unobserve(obj.dom)
      }
    }

    window.removeEventListener('resize', this.poolAutoFit)
  },
  methods: {
    openModal(name, category) {
      if (name && category === 'chart') {
        this.$modal.show(
          () => import(`./modal/${name}`),
          {},
          {
            height: '70%',
            width: '70%',
            draggable: true
            // resizable: true
          }
        )
      } else if (name && category === 'video') {
        if (document.body.clientWidth <= 1000) {
          alert('当前屏幕尺寸过小，请更换设备查看')
          return
        }
        this.$modal.show(
          {
            template: `
            <div class="video-play-container">
                <div class="player">
                  <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  >
                  </video-player>
                </div>
              </div>
          `,
            props: ['playerOptions']
          },
          {
            playerOptions: {
              playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
              autoplay: false, //如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
              language: 'zh-CN',
              aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: true, // 当true时，Video.js player将拥有流体大小，将按比例缩放以适应其容器。
              sources: [
                {
                  type: 'video/mp4',
                  src: 'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/cliamte_change.mp4' //视频地址
                }
              ],
              poster:
                'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/Whale.jpg', //封面地址
              width: document.documentElement.clientWidth,
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
              controlBar: {
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true //全屏按钮
              }
            }
          },
          {
            height: '450px',
            width: '800px',
            draggable: true,
            resizable: true
          }
        )
      } else if (name && category === 'file') {
        this.$modal.show(
          {
            template: `
            <div>
              <div class="file-switch">
                <button class="animated-button" v-for="item in btnList" :key="item.name" @click="switchPdf(item.pdfSrc)">{{ item.name }}</button>
              </div>
              <vue-pdf-embed :source="pdfSrc" />
            </div>
            `,
            components: { VuePdfEmbed },
            data() {
              return {
                btnList: [
                  {
                    name: '巴黎协定',
                    pdfSrc:
                      'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/Paris Convention.pdf'
                  },
                  {
                    name: '气候变化公约',
                    pdfSrc:
                      'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/kpchinese.pdf'
                  },
                  {
                    name: '中国白皮书',
                    pdfSrc:
                      'https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/white.pdf'
                  }
                ],
                pdfSrc: ''
              }
            },
            methods: {
              switchPdf(src) {
                this.pdfSrc = src
              }
            }
          },
          {},
          {
            height: 'auto',
            width: '90%',
            scrollable: true
          }
        )
      } else if (name && category === 'link') {
        // 这里会出现 bug，当用户点击过快 echarts 图表未加载完成时点击会导致卸载出现问题，后面解决
        this.$bus.$emit('changeLogoColor', { name })
      }
    },
    poolAutoFit() {
      this.$nextTick(() => {
        this.poolKey++
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/button.scss';
@import '@/styles/ellipsis.scss';
@import '@/styles/icon.scss';

::v-deep .icon {
  @include icon;
}

.global {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/bg.jpg?x-oss-process=style/process')
    no-repeat center;
  background-size: cover;

  .nav-btn {
    position: absolute;
    top: 1.5vw;
    width: 100%;
    height: 2vw;

    .btn-left {
      float: left;
      width: 25%;
      height: 100%;
      margin-left: 5%;
    }

    .btn-right {
      float: right;
      width: 25%;
      height: 100%;
      margin-right: 5%;
    }

    .btn-list {
      position: relative;
      float: left;
      width: 5.5vw;
      height: 1.6vw;
      font-size: 1vw;
      line-height: 1.6vw;
      color: #0efcff;
      text-align: center;
      letter-spacing: 0.1vw;
      cursor: pointer;

      &::before {
        position: absolute;
        inset: 0;
        content: '';
        border: 1px solid #6176af;
        transform: skewX(-38deg);
      }

      &:hover::before {
        border-color: #0efcff;
        box-shadow: 1px 1px 3px 1px #0efcff inset;
      }
    }

    .btn-left a,
    .btn-right a {
      display: inline-block;

      @include ells;
    }

    .btn-left a:nth-child(2) {
      margin: 0 0.6vw;
    }

    .btn-left a:nth-child(4) {
      margin-left: 0.6vw;
    }

    .btn-right a:nth-child(2) {
      margin: 0 0.6vw;
    }

    .btn-right a:nth-child(4) {
      margin-left: 0.6vw;
    }
  }

  .main {
    height: 90vh;
    // border: 1px solid red;
    .first-row {
      height: 60%;

      .el-col {
        display: flex;
        height: 100%;

        #earth-container {
          width: 100%;
          height: 100%;
        }

        .dv-border-box-12 {
          height: 100%;

          .top-y-1 {
            height: 60%;
          }

          .bottom-y-1 {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            height: 40%;
            padding: 6px;

            .info-box {
              width: 48%;
              height: 48%;
              // font-size: 10px;
              text-align: center;

              span {
                font-size: 1vw;
              }

              .info-num {
                color: #0efcff;

                .icon {
                  fill: #0efcff;
                }
              }

              .info-title {
                span {
                  font-size: 0.8vw;
                  color: #ccc;
                }
              }
            }
          }

          .top-y-2 {
            height: 60%;
          }

          .bottom-y-2 {
            height: 40%;
          }
        }

        .dv-border-box-13 {
          .list-loop {
            height: 100%;
            padding: 20px 15px;

            .title {
              font-weight: 700;
              color: #fff;

              @include ell;
            }

            .container {
              height: 80%;
            }
          }

          .top-y-3 {
            height: 45%;
            padding: 25px 10px 0;
            font-size: 12px;
            font-weight: 700;
            color: #fff;

            @include ell;
          }

          .bottom-y-3 {
            height: 40%;
            padding: 0 10px 20px;

            .ring-chart {
              height: 50%;

              .el-row {
                height: 100%;

                .el-col {
                  height: 100%;

                  .ring-chart {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }

            .battery {
              width: 100%;
              height: 60%;
            }
          }
        }
      }
    }

    .second-row {
      height: 40%;

      .el-col {
        height: 100%;

        .dv-border-box-13 {
          height: 100%;

          .tool-bar {
            height: 100%;
          }
        }

        .dv-border-box-12 {
          height: 100%;

          .heat-map {
            height: 100%;
          }
        }
      }

      .dv-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: 100%;

        .dv-border-box-7 {
          box-sizing: border-box;
          flex: 30%;
          height: 46%;
          margin: 0.3vw;

          .border-box-content {
            .el-row {
              height: 100%;

              .el-col {
                height: 100%;

                .logo-container {
                  height: 100%;
                }

                .font-desc {
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  height: 100%;
                  padding: 10px;

                  p {
                    font-size: 1vw;
                    font-weight: 600;
                    line-height: 2;
                    color: rgb(126 230 251 / 90%);
                    text-align: left;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
